// 公共样式
/********reset Sheets*****/
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  outline: none; // 高亮
}
html {
  font-size: 13px; // 页面基础字体大小
}
body {
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.2em;
  background-color: #f1f1f1;
}
ul {
  list-style: none;
}


$colors: (
  "primary": #db9e3f,
  "white": #fff,
  "line": #f9f9f9,
  "grey": #999,
  "dark-1": #343440,
  "dark": #222,
  "black": #000
);

@each $colorKey, $color in $colors {
  .text-#{$colorKey} {
    color: $color;
  }
  .bg-#{$colorKey} {
    background-color: $color;
  }
}

/***  text-align    ****/
@each $var in (left, center, right) {
  .text-#{$var} {
    text-align: $var;
  }
}

/***  font size   ***/
$base-font-size: 1rem;
$font-sizes:(
  xs: 0.7692, // 10px
  sm: 0.9231, // 12px
  md: 1, //13px
  lg:1.0769,// 14px
  xl:1.2308);// 16px

@each $sizekey, $size in $font-sizes {
  .fs-#{$sizekey} {
    font-size: $size * $base-font-size;
  }
}

/***  flex  ****/
.d-flex {
  display: flex;
}
.flex-column {
  flex-direction: column;
}
$flex-jc:(
  start:flex-start,
  end:flex-end,
  center:center,
  between:space-between,
  around:space-around,
);
@each $key,$value in $flex-jc {
  .jc-#{$key} {
    justify-content: $value;
  }
  
}

$flex-ai:(
  start:flex-start,
  end:flex-end,
  center:center,
  stretch:stretch,
);
@each $key,$value in $flex-ai {
  .ai-#{$key} {
    align-items: $value;
  }
  
}

.flex-1 {
  flex: 1;
}
.flex-grow-1 {
  flex-grow: 1;

}

/****** spacing  *********/
$spacing-types:(
  m:margin,
  p:padding,
);
$spacing-directions:(
  t:top,
  r:right,
  b:bottom,
  l:left,
);
$spacing-sizes:(
  0:0,
  1:0.25,
  2:0.5,
  3:1,
  4:1.5,
  5:3,
);
$base-spacing-size:1rem;
@each $typeKey,$type in $spacing-types {
  // m-1:{}
  @each $sizeKey,$size in $spacing-sizes {
    .#{$typeKey}-#{$sizeKey} {
      #{$type}:$size * $base-spacing-size;
    }
  }
  // mx-1
  @each $sizeKey,$size in $spacing-sizes {
    // 水平方向
    .#{$typeKey}x-#{$sizeKey} {
      #{$type}-left:$size * $base-spacing-size;
      #{$type}-right:$size * $base-spacing-size;
    }
    // 垂直方向
    .#{$typeKey}y-#{$sizeKey} {
      #{$type}-top:$size * $base-spacing-size;
      #{$type}-bottom:$size * $base-spacing-size;
    }
  }
  // .mt-1:{}
  @each $directionKey,$direction in $spacing-directions {
    @each $sizeKey,$size in $spacing-sizes {
      .#{$typeKey}#{$directionKey}-#{$sizeKey} {
        #{$type}-#{$direction}:$size * $base-spacing-size;
      }
    }
  }
}